<template>
  <div class="filter-menu">
    <div
      class="menu-item"
      v-for="(item, index) in menuList"
      :key="index"
      @click="chooseMenu(item, index)"
    >
      <span>{{ item.name }}</span>
      <img class="arrow-down" :src="arrowDown" alt="" />
    </div>
    <div class="right-btn">
      <div
        :class="activeRightIndex == index ? 'btn-item-active' : 'btn-item'"
        v-for="(item, index) in rightBtnList"
        :key="index"
        @click="changeRightActiveIndex(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <van-popup
      v-model:show="showDialog"
      closeable
      :close-icon="closeBtn"
      round
      z-index="100"
      position="center"
    >
      <Province
        v-show="leftActiveIndex == 0"
        ref="provincePopupRef"
        @confirmProvince="confirmProvince"
        @getClear="getClear"
      />
      <SchoolType
        v-show="leftActiveIndex == 1"
        @confirmCollegeType="confirmCollegeType"
      />
      <SchoolFeature
        v-show="leftActiveIndex == 2"
        @confirmSchoolFeature="confirmSchoolFeature"
      />
      <SchoolNature
        v-show="leftActiveIndex == 3"
        @confirmSchoolNature="confirmSchoolNature"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue';
import closeBtn from '@/assets/images/closeBtn.png';
import arrowDown from '@/assets/images/arrow-down.png';
import Province from './Province.vue';
import SchoolType from './SchoolType.vue';
import SchoolFeature from './SchoolFeature.vue';
import SchoolNature from './SchoolNature.vue';
import { previousRoute } from '@/router';

const emit = defineEmits([
  'updateProvince',
  'updateCollegeType',
  'updateSchoolFeature',
  'updateSchoolNature',
  'updateLevelName',
]);

const showDialog = ref(false);
const menuList = ref([
  {
    name: '院校省份',
  },
  {
    name: '院校类型',
  },
  {
    name: '院校特色',
  },
  {
    name: '院校性质',
  },
]);
const rightBtnList = ref([
  {
    name: '本科',
    value: '普通本科',
  },
  {
    name: '专科',
    value: '专科（高职）',
  },
]);
const activeRightIndex = ref(0);
const changeRightActiveIndex = (index) => {
  activeRightIndex.value = index;
  emit('updateLevelName', rightBtnList.value[index].value);
};
const currentFilterName = ref('');
const leftActiveIndex = ref(0);
const chooseMenu = (item, index) => {
  currentFilterName.value = item.name;
  leftActiveIndex.value = index;
  showDialog.value = true;
};
// 省份相关逻辑
const confirmProvince = (provinceList) => {
  let currentProvinceCode = provinceList.map((item) => item.code);
  let currentProvinceName = provinceList.map((item) => item.name).join(',');
  menuList.value[0].name = currentProvinceName;
  if (!menuList.value[0].name) {
    menuList.value[0].name = '院校省份';
  }
  showDialog.value = false;
  emit('updateProvince', currentProvinceCode);
};
const getClear = () => {};
// 院校类型相关逻辑

const confirmCollegeType = (newCollegeType) => {
  let currentCollegeType = newCollegeType.map((item) => item.code).join(',');
  menuList.value[1].name = currentCollegeType;
  if (!menuList.value[1].name) {
    menuList.value[1].name = '院校类型';
  }
  showDialog.value = false;
  emit('updateCollegeType', currentCollegeType);
};
// 院校特色相关逻辑
const confirmSchoolFeature = (newSchoolFeaturedObj) => {
  const { schoolFeatureList, schoolLevelList, schoolNatureList } =
    newSchoolFeaturedObj;
  let currentSchoolFeature = schoolFeatureList
    .map((item) => item.code)
    .join(',');
  let currentSchoolNature = schoolNatureList.map((item) => item.code).join(',');
  let currentCollegeLevel = schoolLevelList.map((item) => item.code).join(',');
  menuList.value[2].name =
    currentSchoolFeature + currentSchoolNature + currentCollegeLevel;
  if (!menuList.value[2].name) {
    menuList.value[2].name = '院校特色';
  }
  showDialog.value = false;
  emit('updateSchoolFeature', currentSchoolFeature);
};
// 院校性质相关逻辑
const confirmSchoolNature = (newSchoolNature) => {
  let currentSchoolNature = newSchoolNature.map((item) => item.code).join(',');
  menuList.value[3].name = currentSchoolNature;
  if (!menuList.value[3].name) {
    menuList.value[3].name = '院校性质';
  }
  showDialog.value = false;
  emit('updateSchoolNature', currentSchoolNature);
};
onActivated(() => {
  if (previousRoute?.name == 'Home') {
    menuList.value[0].name = '院校省份';
    menuList.value[1].name = '院校类型';
    menuList.value[2].name = '院校特色';
    menuList.value[3].name = '院校性质';
    activeRightIndex.value = 0;
  }
});
</script>

<style lang="scss" scoped>
.filter-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 0;
  .menu-item {
    width: 230px;
    height: 60px;
    background: #f7f8fa;
    border-radius: 15px;
    padding: 15px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28px;
    color: #555550;
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .arrow-down {
      width: 20px;
      height: 20px;
    }
  }
  .btn-item {
    width: 135px;
    height: 56px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 24px;
    color: #333333;
  }
  .btn-item-active {
    @extend .btn-item;
    color: #0b6eff;
  }
  .right-btn {
    display: flex;
    margin-left: 24px;
  }
  .right-btn > :first-child {
    border-radius: 15px 0 0 15px;
    border-right: 1px solid #d2d2d2;
  }

  /* 第二个子元素：右上右下圆角 */
  .right-btn > :last-child {
    border-radius: 0 15px 15px 0;
  }
}
</style>
